<template>
  <div class="r-grid-tree">
    <grid-layout
      :layout="layout"
      @update:layout="(v) => $emit('update:layout', v)"
      :col-num="colNum"
      :row-height="30"
      :is-draggable="draggable"
      :is-resizable="resizable"
      :vertical-compact="true"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :static="item.static"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        drag-allow-from=".vue-draggable-handle"
        drag-ignore-from=".no-drag"
        :style="{
          border:
            currentItem === item.i
              ? '2px solid rgb(0, 89, 255)'
              : '1px dashed rgb(0, 89, 255)',
          'padding-bottom': '30px;'
        }"
      >
        <span
          v-if="item.level === 'block'"
          class="node-info no-drag no-position"
        >
          <strong>{{ item.title }}</strong>
        </span>
        <div class="grid-tools no-position" >
          <i class="el-icon-rank vue-draggable-handle" v-show="item.i === currentItem"></i>
          
          <i
            class="el-icon-thumb no-drag item-check"
            @click="itemChange(item)"
            v-show="item.i !== currentItem"
          ></i>
          <i class="el-icon-copy-document item-copy" @click="itemCopy(item)" v-show="item.i === currentItem" />
          <i
            class="el-icon-delete remove no-drag"
            v-show="item.i === currentItem"
            @click="removeItem(item.i)"
          ></i>
          <span class="item-id" v-show="item.i === currentItem">
            {{ item.i }}
          </span>
          
        </div>

        <div class="no-drag r-grid-page" v-if="item.level !== 'item'">
          <r-grid-layout
            :ref="item.i"
            :title.sync="item.title"
            :layout.sync="item.layout"
            :draggable="draggable"
            :colNum="colNum"
            :resizable="resizable"
            @item-change="subItemChange"
          />
        </div>

        <div class="no-drag" v-if="item.level === 'item'">
          <form-create-proxy
            :ref="item.i"
            :value.sync="item.value"
            :props.sync="item.props"
          />
        </div>
      </grid-item>
    </grid-layout>
    <el-dialog
      style="width: 900px"
      fullscreen
      :visible.sync="visible"
      title="添加组件"
      :destroyOnClose="true"
      append-to-body
    >
      <form-add-form @ok="handleAddOk" />
    </el-dialog>
  </div>
</template>

<script>
import { generateID, loadJSON, writeJSON } from "@/utils/utils";
import { GridLayout, GridItem } from "vue-grid-layout";
import FormCreateProxy from "./FormCreateProxy.vue";
import FormAddForm from "./FormAddForm.vue";
import { mapGetters } from "vuex";
// import RGridLayoutCopy from "./RGridLayoutCopy.vue";
// generateID
export default {
  components: {
    GridLayout: GridLayout,
    GridItem: GridItem,
    FormCreateProxy,
    FormAddForm,

    // RGridLayoutCopy,
  },
  data() {
    return {
      visible: false,
      currentTitle: "",
    };
  },
  props: {
    layout: Array,
    colNum: {
      type: Number,
      default: 24,
    },
    draggable: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "",
    },
    resizable: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapGetters(["updateState", "currentItem"]),
  },
  methods: {
    getConfigForm() {
      return [
        {
          type: "el-button",
          children: [" 添加块"],
          field: "no-data-111",
          hidden: false,
          display: true,
          props: {
            size: "mini",
          },
          col: {
            span: 6,
          },
          on: {
            click: () => {
              this.addBlock();
            },
          },
        },
        {
          type: "el-button",
          children: ["添加组件"],
          hidden: false,
          field: "no-data-222",
          display: true,
          props: {
            size: "mini",
          },
          col: {
            span: 6,
          },
          on: {
            click: () => {
              this.addItem();
            },
          },
        },
        {
          type: "el-button",
          children: ["保存布局"],
          hidden: false,
          display: true,
          props: {
            size: "mini",
          },
          field: "no-data-333",
          col: {
            span: 6,
          },
          on: {
            click: () => {
              this.saveLayout();
            },
          },
        },
        {
          type: "el-button",
          children: ["导入布局"],
          hidden: false,
          field: "no-data-444",
          display: true,
          props: {
            size: "mini",
          },
          col: {
            span: 6,
          },
          on: {
            click: () => {
              this.loadLayout();
            },
          },
        },
        {
          type: "input",
          field: "title",
          title: "标题",
          info: "",
          _fc_drag_tag: "input",
          value: this.title,
          wrap: {
            labelWidth: "64px",
          },
          hidden: false,
          display: true,
        },
      ];
    },
    setValue(i, v) {
      const index = this.layout.map((item) => item.i).indexOf(i);
      const layout = Array.from(this.layout);
      if (index >= 0) {
        for (let k in layout[index]) {
          layout[index][k] = v[k] || layout[index][k];
        }
        this.$emit("update:layout", layout);
        return true;
      } else {
        this.$emit("update:title", v.title);
      }
    },
    updateValue(v) {},
    subItemChange({ ref, i }) {
      this.$emit("item-change", { ref, i });
    },
    setTitle(v) {
      console.log(this.currentItem);
    },
    itemChange(item) {
      let ref = this.$refs[item.i][0];
      this.$store.commit("currentItem", item.i);
      this.$emit("item-change", { ref: ref, i: item.i });
    },
    removeItem: function (val) {
      const index = this.layout.map((item) => item.i).indexOf(val);
      const layout = Array.from(this.layout);
      layout.splice(index, 1);
      this.$emit("update:layout", layout);
    },
    addBlock() {
      const layout = Array.from(this.layout);
      let id = generateID();
      layout.push({
        x: 2,
        y: layout.length + 24, // puts it at the bottom
        w: 20,
        h: 3,
        i: id,
        title: "",
        level: "block",
        layout: [],
      });
      this.currentBlock = id;
      this.$emit("update:layout", layout);
    },
    handleAddOk(v) {
      this.visible = false;
      const layout = Array.from(this.layout);
      let id = generateID();
      layout.push({
        x: 2,
        y: layout.length + 24, // puts it at the bottom
        w: 14,
        h: 2,
        i: id,
        level: "item",
        props: v,
      });
      this.$emit("update:layout", layout);
    },
    addItem: function () {
      this.visible = true;
    },
    itemCopy(item) {
      const index = this.layout.map((i) => i.i).indexOf(item.i);
      const layout = Array.from(this.layout);
      if (index >= 0) {
        let it = JSON.parse(JSON.stringify(layout[index]));
        it.i = generateID();
        layout.push(it);
        this.$emit("update:layout", layout);
      }
    },
    saveLayout() {
      // writeJSON
      writeJSON(this.layout, "layout");
    },
    loadLayout() {
      // loadJSON
      loadJSON()
        .then((data) => {
          let layout = JSON.parse(data);
          this.$emit("update:layout", layout);
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {});
    },
  },
};
</script>

<style>
.current-block {
  border: solid 1px rgb(12, 253, 72);
}
.r-grid-tree {
  overflow: hidden;
}
.r-grid-tree .node-info {
  position: absolute;
  top:  0;
  left: 0;
  font-size: 15px;
  cursor: pointer;
  touch-action: none;
  color: #f1f1f1;
  background: dimgrey;
  padding: 0 5px;
  z-index: 99;
}
.item-id {
  font-size: 12px;
  /* position: absolute; */
  z-index: 99;
  color: white;
  background: #0c65ea;
  /* left: 50px; */
  left: 1px;
  right: 1px;
  margin: auto;
  width: fit-content;
}
.item-copy {
  left: 44px;
  z-index: 99;
  background: #0075b9;
  /* position: absolute; */
  color: white;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}
.fc-r {
  border-top: 1px solid #ececec;
  box-sizing: border-box;
  height: 100%;
}
.no-position {
  position: absolute;
}
.grid-tools {
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
    justify-content: flex-start;
}
.remove {
  /* position: absolute; */
  /* left: 2px; */
  /* bottom: 0; */
  padding: 2px;
  cursor: pointer;
  font-size: 20px;
  color: white;
  z-index: 99;
  background: red;
  /* right: 0; */
}
.item-check {
  /* position: absolute; */
  /* left: 2px; */
  /* bottom: 0; */
  padding: 3px;
  cursor: pointer;
  font-size: 18px;
  color: white;
  z-index: 99;
  background: rgb(103, 158, 230);
  /* left: 22px; */
}
.vue-draggable-handle {
  color: rgb(255 255 255);
  padding: 2px;
  box-sizing: border-box;
  cursor: move;
  touch-action: none;
  background: #0982ff;
  font-size: 20px;
  z-index: 99;
}
</style>